import React, { Suspense, lazy } from 'react'
import Layout from '@/pages/Layout'
import { createBrowserRouter, Navigate } from 'react-router-dom'
import Loading from '@/components/ui/loading'
import RecommendPage from '@/pages/recommend'
import Testradar from '@/pages/sun2/test-radar'

// 更激进的懒加载策略 - 每个页面都独立加载
const Sun = lazy(() =>
  import('@/pages/sun2').then((module) => ({
    default: module.default
  }))
)

const SunPage = lazy(() =>
  import('@/pages/sun2/detail').then((module) => ({
    default: module.default
  }))
)

const AiAnalysis = lazy(() =>
  import('@/pages/sun2/analysis').then((module) => ({
    default: module.default
  }))
)

const Pieces = lazy(() =>
  import('@/pages/piece/index_multi').then((module) => ({
    default: module.default
  }))
)

const ImageDemo = lazy(() =>
  import('@/pages/image-demo').then((module) => ({
    default: module.default
  }))
)

const ImageGallery = lazy(() =>
  import('@/pages/image-gallery').then((module) => ({
    default: module.default
  }))
)

const ImageSliceDemo = lazy(() =>
  import('@/pages/image-slice-demo').then((module) => ({
    default: module.default
  }))
)

// 增强的加载组件
const EnhancedLoading = () => (
  <div className="flex min-h-screen items-center justify-center">
    <div className="flex flex-col items-center space-y-4">
      <Loading />
      <p className="text-gray-600">加载中...</p>
    </div>
  </div>
)

// Higher-order component to wrap components with Suspense and Layout
const withLayoutSuspense = (Component: React.ComponentType) => (
  <Layout>
    <Suspense fallback={<EnhancedLoading />}>
      <Component />
    </Suspense>
  </Layout>
)

// Define a default error element to redirect to home page
const defaultErrorElement = <Navigate to="/" replace />

// Define your routes
const router = createBrowserRouter([
  {
    path: '/',
    element: withLayoutSuspense(Sun),
    errorElement: defaultErrorElement
  },
  {
    path: '/:id',
    element: withLayoutSuspense(SunPage),
    errorElement: defaultErrorElement
  },
  {
    path: '/sun2/:id',
    element: withLayoutSuspense(SunPage),
    errorElement: defaultErrorElement
  },
  {
    path: '/sun2',
    element: withLayoutSuspense(Sun),
    errorElement: defaultErrorElement
  },
  {
    path: '/hshe/:id',
    element: withLayoutSuspense(SunPage),
    errorElement: defaultErrorElement
  },
  {
    path: '/hshe',
    element: withLayoutSuspense(Sun),
    errorElement: defaultErrorElement
  },
  {
    path: '/ai/:id',
    element: withLayoutSuspense(AiAnalysis),
    errorElement: defaultErrorElement
  },
  {
    path: '/piece',
    element: <Navigate to="/pieces" replace />,
    errorElement: defaultErrorElement
  },
  {
    path: '/pieces',
    element: withLayoutSuspense(Pieces),
    errorElement: defaultErrorElement
  },
  {
    path: '/pieces/:id',
    element: withLayoutSuspense(Pieces),
    errorElement: defaultErrorElement
  },
  {
    path: '/img-demo',
    element: withLayoutSuspense(ImageDemo),
    errorElement: defaultErrorElement
  },
  {
    path: '/img-gallery',
    element: withLayoutSuspense(ImageGallery),
    errorElement: defaultErrorElement
  },
  {
    path: '/slice',
    element: withLayoutSuspense(ImageSliceDemo),
    errorElement: defaultErrorElement
  },
  {
    path: 'recommend',
    element: <RecommendPage entityId="1" entityType={5} />,
    errorElement: defaultErrorElement
  },
  {
    path: '/radar',
    element: <Testradar />,
    errorElement: defaultErrorElement
  },
  {
    path: '*',
    element: withLayoutSuspense(Sun),
    errorElement: defaultErrorElement
  }
  // Add more routes here
])

export default router
